<template>
    <div> 
        <el-form
          :model="shop"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="门店所在区域" prop="regionData">
            <el-cascader
              :options="options"
              v-model="selectedOptions"
              @change="handleChange"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="addresss">
            <el-input v-model="shop.addresss"></el-input>
          </el-form-item>
          <el-form-item label="管理区域" >
            <el-select @change="currStationChange" v-model="shop.oparate_area">
              <el-option label="金水区" value="金水区"></el-option>
              <el-option label="中原区" value="中原区"></el-option>
              <el-option label="二七区" value="二七区"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店名称" prop="name">
            <el-input v-model="shop.name"></el-input>
          </el-form-item>
          <el-form-item label="业态" prop="type">
            <el-input v-model="shop.type"></el-input>
          </el-form-item>
          <el-form-item label="配送属性" prop="type">
            <el-radio-group v-model="shop.type">
              <el-checkbox label="到店自提" name="type"></el-checkbox>
              <el-checkbox label="门店配送" name="type"></el-checkbox>
              <el-checkbox label="第三方配送" name="type"></el-checkbox>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="营业时间" required>
            <el-input v-model="shop.open_time"></el-input>----
            <el-input v-model="shop.open_time"></el-input>
          </el-form-item>
          <el-form-item label="支持预定" prop="delevery_type" required>
            <el-switch v-model="shop.delevery_type"></el-switch>
          </el-form-item>
          <el-form-item label="预定间隔时间" prop="reserve_interval" required>
            <el-select v-model="shop.reserve_interval" placeholder="请选择">
              <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备货时长" prop="reserve_range" required>
            <el-select v-model="shop.reserve_range" placeholder="请选择">
              <el-option
                v-for="item in time"
                :key="item.val"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="位置坐标">
            <input type="text"  @change="handler" v-model="location.lng"  />--
            <input type="text" v-model="location.lat"  />
            <baidu-map
              class="bm-view"
              @click="zoomchange"
              @moving="syncCenterAndZoom"
              @moveend="syncCenterAndZoom"
              @zoomend="syncCenterAndZoom"
              :center="{ lng:location.lng, lat: location.lat }"
              :zoom="zoom"
              :scroll-whell-zoom="true"
            >
            <bm-local-search :keyword="keyword" :auto-viewport="true"></bm-local-search>
            </baidu-map>
          </el-form-item>
          <el-form-item>
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="联系人" prop="contact_name">
            <el-input v-model="shop.contact_name"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="contact_phone">
            <el-input v-model="shop.contact_phone"></el-input>
          </el-form-item>
          <el-form-item label="是否上线">
            <el-switch v-model="shop.delevery_type"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addShop()">提交</el-button>
          </el-form-item>
        </el-form>
    </div>
  </template>

  <script>
  import { regionData,CodeToText } from "element-china-area-data";
  import { AddShop } from "@/api/shop";
  export default {
    data() {
      return {
        keyword:'',
        
        shop: {
         
        },
        zoom:17,
        //上传图片
        dialogImageUrl: "",
        dialogVisible: false,
        option: [
          {
            value: "选项1",
            label: "10-60分钟",
          },
          {
            value: "选项2",
            label: "10-60小时",
          },
        ],
        value: "",
        time: [
          {
            value: "选项1",
            label: "10-60分钟",
          },
          {
            value: "选项2",
            label: "10-60小时",
          },
        ],
        val: "",
        //省市级联数据
        options: regionData,
        selectedOptions: [],
        value1: new Date(2016, 9, 10, 18, 40),
        value2: new Date(2016, 9, 10, 18, 40),
        location:{
          lat:116.294625,
          lng:39.961627
        }
      };
    },
    methods: {
      currStationChange(val){
          console.log("currStationChange",val);
          this.keyword=val
      },
      syncCenterAndZoom(e){
          const {lng,lat}=e.target.getCenter()
          this.location.lng=lng;
          this.location.lat=lat;
          this.shop.lat=lat;
          this.shop.lon=lng;
          this.zoom=e.target.getZoom()
  
      },
      zoomchange(e) {
        // this.map.setCenterAndZoom(this.point, this.zoom)
        console.log(e, "地图");
        this.lat = e.point.lat;
        this.lng = e.point.lng;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
  
      addShop() {
        AddShop(this.shop).then((res) => {
          if (res && res.data && res.data.code === 0) {
            this.shop = res.data.data;
            this.$message({
              type: "success",
              message: "新增成功，2秒后自动返回",
            });
            setTimeout(() => {
              this.$router.push("/admin/shop/shopList");
            }, 1500);
          }
         
        });
      
      },
      handleChange(value) {
      // 选择完成之后，它最后的值其实是一个区域码，并不是文字，需要自己用CodeToText处理数据
        console.log(value, "省市级联的编号");//['110000', '110100', '110101']
        let codeStr=value.join(',')
        console.log(codeStr,'字符串');//110000,110100,110101
        let name=this.getCodeToText(codeStr,value)
        console.log(name,"名字");//北京市/市辖区/东城区
        this.keyword=name;
  
      },
      handler({BMap,map}){
          let point=new BMap.Point(this.location.lng,this.location.lat)
          map.centerAndZoom(point,13)
          var marker=new BMap.Marker(point)
          map.addOverlay(marker)
          var circle=new BMap.Circle(point,6,{strokeColor:'blue'})
          map.addOverlay(circle)
      },
      getCodeToText(codeStr, codeArray) {
        if (null === codeStr && null === codeArray) {
          return null;
        } else if (null === codeArray) {
          codeArray = codeStr.split(",");
        }
  
        let area = "";
        switch (codeArray.length) {
          case 1:
            area += CodeToText[codeArray[0]];
            break;
          case 2:
            area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
            break;
          case 3:
            area +=
              CodeToText[codeArray[0]] +
              "/" +
              CodeToText[codeArray[1]] +
              "/" +
              CodeToText[codeArray[2]];
            break;
          default:
            break;
        }
        return area;
      },
  
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert("submit!");
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
  };
  </script>
  <style>
  .bm-view {
    width: 50%;
    height: 400px;
  }
  </style>
  